import React, {useEffect, useState} from 'react';
import {NavLink, Outlet, useNavigate} from "react-router-dom";
import {getMessageList} from "../apis/message";

function Message(props) {
    const navigate = useNavigate()
    const [messageList,setMessageList] = useState([])
    useEffect(()=>{
        (async ()=>{
            const messageList = await getMessageList()
            setMessageList(messageList)
        })()
    },[])
    return (
        <div>
            {
                messageList.map(list=>(
                    <div key={list.id}>
                        <NavLink to={list.id}>{list.title}</NavLink> &nbsp;&nbsp;
                        <button onClick={()=>navigate(`${list.id}`)}>push</button>
                        &nbsp;
                        <button onClick={()=>navigate({pathname:`${list.id}`},{replace:true})}>replace</button>
                    </div>
                ))
            }
            <button onClick={()=>navigate(1)}>前进</button>
            <button onClick={()=>navigate(-1)}>后退</button>
            <hr/>
            <Outlet/>
        </div>
    );
}

export default Message;